﻿@model List<Jurisdiction>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <!-- 引入 Vue 3 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
    <style>
        .qp {
            background-color: #FFFFBB;
        }

        /* 树形菜单样式 */
        .tree-menu {
            list-style: none;
            padding-left: 0;
            font-family: Arial, sans-serif;
        }

            .tree-menu li {
                margin: 4px 0;
                transition: all 0.3s ease;
            }

            /* 隐藏默认的checkbox */
            .tree-menu input[type="checkbox"] {
                display: none;
            }

            /* 自定义展开/折叠图标 */
            .tree-menu label {
                position: relative;
                padding-left: 24px;
                cursor: pointer;
                display: inline-block;
                transition: all 0.3s ease;
            }

                .tree-menu label::before {
                    content: "+";
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 16px;
                    height: 16px;
                    text-align: center;
                    line-height: 16px;
                    background-color: #f0f0f0;
                    border: 1px solid #ccc;
                    border-radius: 3px;
                    transition: all 0.3s ease;
                }

                .tree-menu label:hover {
                    color: #007BFF;
                }

                    .tree-menu label:hover::before {
                        background-color: #e0e0e0;
                    }

            /* 当checkbox选中时显示子菜单 */
            .tree-menu input[type="checkbox"]:checked ~ ul {
                max-height: 1000px;
            }

            .tree-menu input[type="checkbox"]:checked ~ label::before {
                content: "-";
                transform: rotate(180deg);
            }

            /* 子菜单默认隐藏 */
            .tree-menu ul {
                display: block;
                list-style: none;
                padding-left: 24px;
                margin: 4px 0;
                overflow: hidden;
                max-height: 0;
                transition: max-height 0.8s ease-out;
            }

            /* 无子菜单的节点样式 */
            .tree-menu li.no-children label::before {
                content: "";
                background: none;
                border: none;
            }


            .fade-in.active {
                opacity: 1;
                transform: translateY(0);
            }

        /* 按钮动画效果 */
        button {
            transition: all 0.3s ease;
            padding: 6px 12px;
            border: 1px solid #ccc;
            background-color: #f8f9fa;
            border-radius: 4px;
            cursor: pointer;
        }

            button:hover {
                background-color: #e2e6ea;
                transform: translateY(-2px);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }

            button:active {
                transform: translateY(0);
                box-shadow: none;
            }

        /* 导航栏动画 */
        .navbar {
            transition: all 0.3s ease;
        }

            .navbar:hover {
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }

        /* 让已选中的菜单项保持展开状态 */
        .tree-menu input[type="checkbox"][checked] ~ ul {
            max-height: 1000px;
        }

        a {
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul class="tree-menu fade-in" :class="{ 'active': isActive }">
            <!-- 菜单结构保持不变 -->
            <li v-for="menu in menuList" :key="menu.JuriID">
                <template v-if="menu.Children && menu.Children.length > 0">
                    <input type="checkbox" :id="`node_${menu.JuriID}`" v-model="checkedKeys" v-on:change ="handleCheck(menu)" />
                    <label :for="`node_${menu.JuriID}`">{{ menu.JurName }}</label>
                    <ul>
                        <li v-for="subMenu in menu.Children" :key="subMenu.JuriID">
                            <template v-if="subMenu.Children && subMenu.Children.length > 0">
                                <input type="checkbox" :id="`node_${subMenu.JuriID}`" v-model="checkedKeys" v-on:change ="handleCheck(subMenu)" />
                                <label :for="`node_${subMenu.JuriID}`">{{ subMenu.JurName }}</label>
                                <ul>
                                    <li class="no-children" v-for="childMenu in subMenu.Children" :key="childMenu.JuriID">
                                        <label v-on:click ="navigate(childMenu)">{{ childMenu.JurName }}</label>
                                    </li>
                                </ul>
                            </template>
                            <template v-else>
                                <li class="no-children">
                                    <label v-on:click ="navigate(subMenu)">{{ subMenu.JurName }}</label>
                                </li>
                            </template>
                        </li>
                    </ul>
                </template>
                <template v-else>
                    <li class="no-children">
                        <label v-on:click ="navigate(menu)">{{ menu.JurName }}</label>
                    </li>
                </template>
            </li>
        </ul>
    </div>

    <script>
        const { createApp, ref } = Vue;
        createApp({
          setup() {
            const menuList = ref(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
            const checkedKeys = ref([]);
            const isActive = ref(false);

            // 处理导航逻辑，添加安全检查
            const navigate = (menu) => {
              try {
                // 检查是否在 iframe 中
                if (window !== window.parent) {
                  // 检查父窗口是否有 mainFrame
                  if (parent.mainFrame && typeof parent.mainFrame.location === 'object') {
                      console.info(1);
                      getUrl(menu);
                  } else {
                    console.info(2);
                    // 备选方案：在当前窗口打开
                    window.location.href = getUrl(menu);
                  }
                } else {
                  console.log('当前页面不在 iframe 中，在当前窗口打开');
                  window.location.href = getUrl(menu);
                }
              } catch (error) {
                console.error('导航失败:', error);
                // 备选方案：在当前窗口打开
                window.location.href = getUrl(menu);
              }
            };

            // 保持原有方法
            const handleCheck = (menu) => {
              // 菜单展开/收起逻辑
            };

            const getUrl = (menu) => {
                console.log(menu.Action+":"+menu.Controller);
                const targetUrl = `/${menu.Controller}/${menu.Action}`;
                parent.mainFrame.location.href =targetUrl;
            };

            setTimeout(() => {
              isActive.value = true;
            }, 100);

            return { menuList, checkedKeys, handleCheck, getUrl, navigate, isActive };
          }
        }).mount('#app');
    </script>
</body>

</html>